<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1- 什么是事件对象?  事件在发生时会产生一些数据
        // 2- 如何获取事件对象? 在事件处理函数里面,准备一个形参,这个形参就是事件对象.


        document.addEventListener('click', function (e) {
            // clientX 网页的X轴坐标
            // clientY 网页的Y轴坐标
            //  点击事件所获取到的数据就是一个事件对象.形参e就是设置的事件对象.
            console.log(e.clientX);
            console.log(e.clientY);
        })

        // 2-常用的事件对象属性
        // `e.type` 当前事件的类型
        // `e.clientX/Y` 光标相对浏览器窗口的位置
        // `e.offsetX/Y` 光标相于当前 DOM 元素的位置

        // 当按键按下,事件对象可以获取到该按键信息
        document.addEventListener('keydown', function (e) {
            console.log(e);
        })
    </script>
</body>

</html>